<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
        <h:outputLabel value="Cliente" class="CLIENTE"/>
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido">

            <p:panel header="Cliente">
                <p:panelGrid columns="2">
                    <h:outputLabel value="Cedula/RUC"/>
                    <p:inputText value="#{clienteAction.cliente.cedulaRuc}"/>

                    <h:outputLabel value="Nombres"/>
                    <p:inputText value="#{clienteAction.cliente.nombres}"/>          

                    <h:outputLabel value="Apellidos"/>
                    <p:inputText value="#{clienteAction.cliente.apellidos}"/>

                    <h:outputLabel value="Email"/>
                    <p:inputText value="#{clienteAction.cliente.email}" />

                    <h:outputLabel value="Telefono"/>
                    <p:inputText value="#{clienteAction.cliente.telefono}" />

                    <h:outputLabel value="Descuento"/>
                    <p:spinner value="#{clienteAction.cliente.descuento}" min="0"/>
                                
                    <h:outputText value="Fecha Nacimiento: " />  
                    <p:calendar value="#{clienteAction.cliente.fechaNacimiento}" id="popupButtonCal" showOn="button" />

                    <p:commandButton id="showDialogButton" type="button" action="#{clienteAction.añadirNuevaDireccion()}" value="Añadir Direccion" onclick="dlg.show()" ajax="false" rendered="#{!clienteAction.modomodificar}"/>  

                    <p:dialog id="dialogAnadirDireccion" header="DIRECCION" widgetVar="dlg" resizable="false">  
                        <h:form id="form">  
                            <p:panelGrid columns="2">
                                <h:outputLabel value="Calle Secundaria"/>
                                <p:inputText value="#{DireccionAction.direccion.calleSecundaria}"/>

                                <h:outputLabel value="Calle Principal"/>
                                <p:inputText value="#{DireccionAction.direccion.callePrincipal}"/>          

                                <h:outputLabel value="Ciudad"/>
                                <p:selectOneMenu id="menuciudad" value="#{DireccionAction.direccion.ciudad}" panelStyle="width:150px"  converter="CiudadConverter"
                                                 var="c" style="width:160px"  filter="true" filterMatchMode="startsWith">  
                                    <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                                    <f:selectItems value="#{DireccionAction.ciudades}" var="CiudadConverter" itemLabel="#{CiudadConverter.nombre}" itemValue="#{CiudadConverter}"/>
                                    <p:column>  
                                        #{c.nombre}
                                    </p:column>  
                                </p:selectOneMenu>  

                                <h:outputLabel value="Latitud"/>
                                <p:spinner value="#{DireccionAction.direccion.latitud}" min="0"/>

                                <h:outputLabel value="Longitud"/>
                                <p:spinner value="#{DireccionAction.direccion.longitud}" min="0"/>

                                <h:outputLabel value="Numeracion"/>
                                <p:inputText value="#{DireccionAction.direccion.numeracion}" />

                                <h:outputLabel value="Referencia"/>
                                <p:inputText value="#{DireccionAction.direccion.referencia}" />  

                          </p:panelGrid>
                            
                        </h:form>  
                        <p:commandButton value="AÑADIR" actionListener="#{clienteAction.añadirDireccion()}" ajax="false"/>
                    </p:dialog>  
                    
                    <h:panelGroup/>  
                </p:panelGrid>                    
                
                
                <p:dataTable id="MyTableDirecciones" var="direccion" value="#{clienteAction.direcciones}" rendered="#{!clienteAction.modomodificar}">                    
                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Calle Secundaria"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.calleSecundaria}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Calle Principal"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.callePrincipal}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Ciudad"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.ciudad.idCiudad}" />
                    </p:column>   

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Latitud"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.latitud}" />
                    </p:column>  

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Longitud"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.longitud}" />
                    </p:column> 

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Numeracion"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.numeracion}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputLabel value="Referencia"/>
                        </f:facet>
                        <h:outputLabel value="#{direccion.referencia}" />
                    </p:column>
                                        
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value=" "/>
                        </f:facet>
                        <p:commandLink action="#{clienteAction.eliminarDireccion(direccion)}" value="Eliminar" update=":contenido"/>
                    </p:column>
                    
                </p:dataTable>
                
                <br></br>
                <p:panelGrid columns="2">
                    <p:commandButton id="btnguardar" value="Guardar" action="#{clienteAction.crearCliente()}"/>
                    <p:commandButton id="btncancelar" value="Cancelar" action="#{clienteAction.cancel()}"/>
                </p:panelGrid>
                <h:panelGroup/>
                <p:messages id="messagesCliente" showDetail="true" autoUpdate="true" closable="true" > 
                    <p:effect type="fade" event="load" delay="3000" />
                </p:messages>

            </p:panel>
            
            <br/><br/>
            <p:panel >
                <p:commandLink value="Principal" action="#{generalAction.navegaPrincipal()}" ajax="false"/>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
